<template>
    <view :class="['tag', convertClass(status)]"> {{ status }} </view>
</template>

<script>
    import filter from "@/utils/filter";

    export default {
        name: 'Tag',
        props: {
            status: {
                type: String,
                default: '--'
            }
        },
        data() {
            return {
                filter
            }
        },
        methods: {
            convertClass() {
                switch (this.status) {
                    case '下发':
                        return 'tag-1'
                    case '生产':
                        return 'tag-2'
                    case '中断':
                        return 'tag-3'
                    case '暂停':
                        return 'tag-4'
                    case '完成':
                        return 'tag-5'
                    case '转产中':
                        return 'tag-6'
                    case '转产完成':
                        return 'tag-7'
                    case '调机中':
                        return 'tag-8'
                    case '调机完成':
                        return 'tag-9'
                    case '拆模':
                        return 'tag-10'
                    default:
                        return 'tag-1'
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .tag {
        border-radius: 5rem;
        height: 4rem;
        padding: 0 2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 2rem;

        // 下发
        &-1 {
            background: #e6f0f8;
            color: #6bbee1;
        }
        // 生产
        &-2 {
            background: #e6f0f8;
            color: #73d8a6;
        }
        // 中断
        &-3 {
            background: #e6f0f8;
            color: #d48b3e;
        }
        // 暂停
        &-4 {
            background: #e6f0f8;
            color: #d8be49;
        }
        // 完成
        &-5 {
            background: #e6f0f8;
            color: #4668e2;
        }
        // 转产中
        &-6 {
            background: #e6f0f8;
            color: #e794c9;
        }
        // 转产完成
        &-7 {
            background: #e6f0f8;
            color: #c25bc6;
        }
        // 调剂中
        &-8 {
            background: #e6f0f8;
            color: #d8b2f2;
        }
        // 调机完成
        &-9 {
            background: #e6f0f8;
            color: #8698f6;
        }
        // 拆模
        &-10 {
            background: #e6f0f8;
            color: #ea709f;
        }
    }
</style>